<template>
    <!-- d:\applet\byteApplet\dy-wallpaper-applet-2\pages\apply\apply.ttml -->

    <view>
        <form @submit="formSubmit">
			
			<view class="cu-form-group" style="height: 100px;">
				<view class="title">头像</view>
				<view class="grid col-4 grid-square flex-sub" @click="ChooseImage">
					<view class="bg-img guoshao-touxian" >
						<image :src="pic" mode="aspectFill" ></image>
					</view>
					<view class="solids guoshao-choose"  v-if="pic == null">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			
            <view class="cu-form-group">
                <view class="title">昵称</view>
                <input placeholder="请输入昵称" name="nickname" :value="nickname" maxlength="10" />
            </view>
            <view class="cu-form-group">
                <view class="title">手机号码</view>
                <input placeholder="请输入手机号" type="number" name="phone" :value="phone" maxlength="11" @input="phoneInput" />
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
            </view>
			<view class="cu-form-group">
			    <view class="title">登录密码</view>
			    <input placeholder="请输入登录密码16位以内" name="loginPassword" :value="loginPassword" maxlength="16" />
			</view>
			<!--
            <view class="cu-form-group">
                <view class="title">微信号</view>
                <input placeholder="请输入微信号" name="wxaccount" :value="wxaccount" maxlength="30" />
            </view>
			-->

            <view class="cu-form-group">
                <view class="title">创作者口令</view>
                <input placeholder="请输入字母，或数字建议控制在8位" name="word" :value="word" maxlength="8" @input="wordInput" />
                <button class="cu-btn bg-blue shadow guoshao-bg" @click.stop.prevent="checkWord">检测口令</button>
            </view>

			<view class="cu-form-group">
				<view class="title">推荐人口令</view>
				<input placeholder="请输入推荐人口令(选填)" :value="recommenderWord" name="recommenderWord" disabled="true" maxlength="8"></input>
			</view>

			<view class="cu-form-group">
			</view>
			<view class="" style="padding: 10px;">
				<text class="" style="color: red;">
					申请创作者后请联系客服，备注创作者加口令以便快速审核。
				</text>
				<text  @click="copyContact" style="color: #0081FF;" v-if="configs.length > 0"> 点击复制联系方式</text>

			</view>

			<view class="line" style="margin-left: 10px;margin-top: 20px;">
				<jiuaiCheckbox @change="changeBox"  :borderStyle="checked ? '1px solid #5571DD' : '1px solid #d1d1d1'" 
				:value="checked"></jiuaiCheckbox>
				<text style="margin-left: 5px;">
					我已阅读并同意
				</text>
				<text style="margin-left: 5px;color: #0081FF;"  @click="creator">《创作者协议》</text>
				
			</view>
			
            <view class="padding flex flex-direction">
                <button class="cu-btn bg-blue margin-tb-sm lg round guoshao-bg" formType="submit">立即注册</button>
            </view>

			<view class="reg-text">
				<text class="no-account">已有账号？</text>
				<text class="reg-click" @click="login()">去登陆</text>
			</view>
			
        </form>
    </view>
</template>

<script>
import tuiLoading from '../../components/loading/loading';
import tuiLoadmore from '../../components/loadmore/loadmore';
import tuiNomore from '../../components/nomore/nomore';

import jiuaiCheckbox from "@/components/jiuai-checkbox/jiuai-checkbox.vue";

const Config = require('../../utils/config.js');

const Constant = require('../../utils/constants.js');

const util = require('../../utils/util.js');
const http = require('../../utils/http.js');


const Authentication = require('../../utils/authentication'); 

var interval = null;

export default {
    components: {
        tuiLoading,
        tuiLoadmore,
        tuiNomore,
		jiuaiCheckbox
    },
    data() {
        return {
			pic:null,
            nickname: '',
            phone: '',
            wxaccount: '',
            dyaccount: '',
            word: '',
            recommenderWord: '',
            cardName: '',
            bankCardNo: '',
            bankName: '',
            bankBranch: '',
            cWord: '',
            code: '',
			loginPassword:'',
			checked:false,
			configs:[]
        };
    },
    onLoad: function (options) {
		util.getConfigs(this,"wx");
		if (options.scene) {
			//扫码进入
			this.recommenderWord = decodeURIComponent(options.scene);
		} else if(options.recommenderWord != '' && options.recommenderWord != undefined){
			//分享进入
			this.recommenderWord = options.recommenderWord;
		}
	},
    onShow: function () {
		
	},
	onShareAppMessage: function () {
	   
	},
    methods: {
		copyContact: function (e) {
		    uni.setClipboardData({
		        data: this.configs[0].value,
		        success: function (res) {
		            uni.showToast({
		                title: '复制成功',
		                duration: 2000,
						icon:'none',
		                success(res) {},
		            
		                fail(res) {}
		            });
		        }
		    });
		},
		creator:function(){
			uni.navigateTo({
				url:'/pages/about/creAgreement'
			})
		},
		lianxi:function(){
			uni.navigateTo({
				url:'/pages/talent/cooperation/cooperation'
			})
		},
		changeBox(e){//选中切换事件(由组件发起)
			let checked = e.detail.checked; 
			this.setData({
			    checked: checked
			});
		},
        //获取用户输入的用户名
        wordInput: function (e) {
            this.setData({
                cWord: e.detail.value
            });
        },

        /**
         * 检测口令
         */
        checkWord: function (event) {
            let that = this;

            if (this.cWord == '') {
                uni.showToast({
                    title: '请输入口令',
                    duration: 1500,
                    icon: 'none'
                });
                return;
            }

            uni.showLoading({
                title: '检测中...'
            });
            var params = {
                url: '/talent/checkWord',
                method: 'GET',
                data: {
                    word: that.cWord
                },
                callBack: function (res) {
                    uni.hideLoading();

                    if (res.code == 200) {
                        uni.showToast({
                            title: res.data,
                            duration: 2000
                        });
                    } else {
                        uni.showToast({
                            title: res.msg,
                            duration: 2000,
                            icon: 'none'
                        });
                    }
                }
            };
            http.request(params);
        },

		ChooseImage() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				//sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: (res) => {
					let maxByte = 1024*1024* 2;
					
					if(res.tempFiles[0].size > maxByte){
						uni.showToast({
						    title: '请上传2M内的',
						    // 内容
						    icon: 'none' // 图标
						});
						return;
					}
					that.pic = res.tempFiles[0].path;
				},
				fail(err) {
					let errType = err.errMsg.includes("chooseImage:fail cancel") ? "取消选择" : "选择失败";
					console.log(err);
					if(err.errMsg === 'chooseImage:fail auth deny'){
						uni.openSetting({
							success(res) {
							},
						})
					}
					
				  },
				  complete(res) {
				  },
			});
		},
        //验证码
        codeInput: function (e) {
            this.setData({
                code: e.detail.value
            });
        },

        phoneInput: function (e) {
            this.setData({
                phone: e.detail.value
            });
        },

        formSubmit: function (event) {
			
            let that = this;
			
            that.setData(event.detail.value);

            if (!that.checkdForm()) {
                return;
            }

            uni.showLoading({
                title: '提交中'
            });
			//图片上传
			uni.uploadFile({
			  baseUrl:true,
			  url: Config.domain +"/talent/registerNew",
			  filePath: that.pic,
			  name: 'file',
			  header: {
				systemType: Constant.MINI_TYPE,
			    'accept': 'application/json'
			  },
			  formData:event.detail.value,
			  success: function(res){
				
				if(res.statusCode == 200 || res.statusCode == undefined){
					res = JSON.parse(res.data);
					if (res.code == 200) {
						uni.hideLoading();
						that.setData({
							nickname: '',
							phone: '',
							wxaccount: '',
							dyaccount: '',
							word: '',
							recommenderWord: '',
							cardName: '',
							bankCardNo: '',
							bankName: '',
							bankBranch: '',
							code: '',
							pic:null
						});
						uni.showToast({
							title: '注册成功,待审核',
							duration: 2000,
							icon:'none'
						});
						setTimeout(() => {
							uni.reLaunch({
								url:'/pages/login/login'
							})
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
				
			  },
			  fail: function(res){
			  },
			})
        },

        checkdForm: function () {
            let that = this;
			
			if(that.pic == null){
				uni.showToast({
				    title: '请上传头像',
				    icon: 'none',
				    duration: 1000
				});
				return false;
			}

            if (that.nickname == '') {
                uni.showToast({
                    title: '请输入昵称',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            }

            if (that.phone == '') {
                uni.showToast({
                    title: '请输入手机号码',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            }
			if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
				uni.showToast({ title: '请输入正确手机号', icon: 'none' });
				return;
			}
			
			if(that.loginPassword == ''){
				uni.showToast({
				    title: '请输入登录密码',
				    icon: 'none',
				    duration: 1000
				});
				return false;
			}
			// if (that.wxaccount == '') {
			//     uni.showToast({
			//         title: '请输入微信号',
			//         icon: 'none',
			//         duration: 1000
			//     });
			//     return false;
			// }
            if (that.word == '') {
                uni.showToast({
                    title: '请输入创作者口令',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            }
			if(!that.checked){
				uni.showToast({
				    title: '请阅读创作者协议',
				    icon: 'none',
				    duration: 1000
				});
				return false;
			}
            return true;
        },
		login(flag){
			uni.navigateTo({
				url:'/pages/login/login'
			})
		},
    }
};
</script>
<style>
@import './apply.css';

.reg-text{
	text-align: center;
	margin-bottom: 20px;
}
.reg-text .no-account{
	color: #9a9a9a;
}
.reg-text .reg-click{
	color: #5677fc; 
	font-weight: 600;
}
</style>
